<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-02-19 17:51:34
 * @LastEditTime: 2019-10-17 15:29:21
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>SluckyUI</title>
</head>

<body>
    <style>
        .loading-container {
            text-align: center;
        }

        .font-logo {
            color: #000;
            font-size: 16px;
            margin: 32px;
        }

        .loading-box {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            /* background-color: black; */
        }

        .loader {
            width: 20em;
            height: 20em;
            font-size: 10px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loader .face {
            position: absolute;
            border-radius: 50%;
            border-style: solid;
            animation: animate 3s linear infinite;
        }

        .loader .face:nth-child(1) {
            width: 100%;
            height: 100%;
            color: #fc7e36;
            border-color: currentColor transparent transparent currentColor;
            border-width: 0.2em 0.2em 0em 0em;
            --deg: -45deg;
            animation-direction: normal;
        }

        .loader .face:nth-child(2) {
            width: 70%;
            height: 70%;
            color: #26a597;
            border-color: currentColor currentColor transparent transparent;
            border-width: 0.2em 0em 0em 0.2em;
            --deg: -135deg;
            animation-direction: reverse;
        }

        .loader .face .circle {
            position: absolute;
            width: 50%;
            height: 0.1em;
            top: 50%;
            left: 50%;
            background-color: transparent;
            transform: rotate(var(--deg));
            transform-origin: left;
        }

        .loader .face .circle::before {
            position: absolute;
            top: -0.5em;
            right: -0.5em;
            content: '';
            width: 1em;
            height: 1em;
            background-color: currentColor;
            border-radius: 50%;
            box-shadow: 0 0 2em,
                0 0 4em,
                0 0 6em,
                0 0 8em,
                0 0 10em,
                0 0 0 0.5em rgba(255, 255, 0, 0.1);
        }

        @keyframes animate {
            to {
                transform: rotate(1turn);
            }
        }

        #load {
            position: absolute;
            width: 600px;
            height: 36px;
            left: 50%;
            top: 40%;
            margin-left: -300px;
            overflow: visible;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
        }

        #load div {
            position: absolute;
            width: 20px;
            height: 36px;
            opacity: 0;
            font-family: Helvetica, Arial, sans-serif;
            animation: move 2s linear infinite;
            -o-animation: move 2s linear infinite;
            -moz-animation: move 2s linear infinite;
            -webkit-animation: move 2s linear infinite;
            transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            color: #26a597;
        }

        #load div:nth-child(2) {
            animation-delay: 0.2s;
            -o-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            -webkit-animation-delay: 0.2s;
        }

        #load div:nth-child(3) {
            animation-delay: 0.4s;
            -o-animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
        }

        #load div:nth-child(4) {
            animation-delay: 0.6s;
            -o-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            -webkit-animation-delay: 0.6s;
        }

        #load div:nth-child(5) {
            animation-delay: 0.8s;
            -o-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            -webkit-animation-delay: 0.8s;
        }

        #load div:nth-child(6) {
            animation-delay: 1s;
            -o-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -webkit-animation-delay: 1s;
        }

        #load div:nth-child(7) {
            animation-delay: 1.2s;
            -o-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            -webkit-animation-delay: 1.2s;
        }

        @keyframes move {
            0% {
                left: 0;
                opacity: 0;
            }

            35% {
                left: 41%;
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            65% {
                left: 59%;
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            100% {
                left: 100%;
                -moz-transform: rotate(-180deg);
                -webkit-transform: rotate(-180deg);
                -o-transform: rotate(-180deg);
                transform: rotate(-180deg);
                opacity: 0;
            }
        }

        @-moz-keyframes move {
            0% {
                left: 0;
                opacity: 0;
            }

            35% {
                left: 41%;
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            65% {
                left: 59%;
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            100% {
                left: 100%;
                -moz-transform: rotate(-180deg);
                transform: rotate(-180deg);
                opacity: 0;
            }
        }

        @-webkit-keyframes move {
            0% {
                left: 0;
                opacity: 0;
            }

            35% {
                left: 41%;
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            65% {
                left: 59%;
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            100% {
                left: 100%;
                -webkit-transform: rotate(-180deg);
                transform: rotate(-180deg);
                opacity: 0;
            }
        }

        @-o-keyframes move {
            0% {
                left: 0;
                opacity: 0;
            }

            35% {
                left: 41%;
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            65% {
                left: 59%;
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
            }

            100% {
                left: 100%;
                -o-transform: rotate(-180deg);
                transform: rotate(-180deg);
                opacity: 0;
            }
        }

        @keyframes flash {
            0% {
                opacity: 1;
            }

            25% {
                opacity: .5;
            }

            50% {
                opacity: .1;
            }

            100% {
                opacity: 1;
            }
        }

        .flash {
            animation: flash 2s linear infinite;
        }

        .logo-container {
            text-align: center;
        }

        .brandf-logo {
            width: 1024px;
            height: 768px;
            box-sizing: border-box;
            overflow: hidden;
        }
    </style>
    <div style="display:none">
        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg66226" viewBox="0 0 1024 768" height="768px" width="1024px" version="1.1">
            <symbol id="icon-test">
                <defs id="defs66230"></defs>
                <g id="logo-group">
                    <g id="title" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" aria-label="BrandF">
                        <path id="path66234" style="font-style: normal; font-weight: 300; font-size: 72px; line-height: 1; font-family: Montserrat Light Alt1; font-variant-ligatures: none; text-align: center; text-anchor: middle; fill: rgb(1, 33, 58);" d="m 425.6315,98.256 c -1.872,-2.16 -4.608,-3.528 -8.208,-4.248 2.52,-0.792 4.608,-2.232 6.12,-4.248 1.512,-1.944 2.304,-4.32 2.304,-7.272 0,-4.104 -1.584,-7.272 -4.608,-9.504 -3.024,-2.232 -7.272,-3.384 -12.744,-3.384 h -21.024 v 3.168 h 20.88 c 4.392,0 7.776,0.864 10.152,2.592 2.376,1.728 3.6,4.176 3.6,7.416 0,3.312 -1.224,5.832 -3.6,7.56 -2.376,1.728 -5.76,2.52 -10.152,2.52 h -20.88 v 3.168 h 22.464 c 4.824,0 8.568,0.864 11.088,2.52 2.52,1.728 3.816,4.32 3.816,7.848 0,3.6 -1.296,6.192 -3.816,7.92 -2.52,1.728 -6.192,2.52 -11.088,2.52 h -22.464 V 120 h 22.464 c 6.12,0 10.728,-1.152 13.896,-3.456 3.096,-2.304 4.68,-5.544 4.68,-9.864 0,-3.384 -1.008,-6.192 -2.88,-8.424 z" transform="translate(0 244.8559999999969) translate(238.28406666666115 99.42400000000234) scale(1.6666666666667) translate(-387.4715 -69.6)"></path>
                        <path id="path66236" style="font-style: normal; font-weight: 300; font-size: 72px; line-height: 1; font-family: Montserrat Light Alt1; font-variant-ligatures: none; text-align: center; text-anchor: middle; fill: rgb(1, 33, 58);" d="m 449.31612,84.36 c -2.44799,1.44 -4.248,3.528 -5.39999,6.264 v -8.208 h -3.45601 V 120 h 3.6 v -19.584 c 0,-4.608 1.15201,-8.28 3.528,-10.872 2.30401,-2.592 5.616,-3.96 9.79201,-3.96 l 0.86399,0.072 v -3.528 c -3.528,0 -6.48,0.792 -8.928,2.232 z" transform="translate(0 244.8559999999969) translate(351.59843333333004 120.30400000000276) scale(1.6666666666667) translate(-440.46012 -82.128)"></path>
                        <path id="path66238" style="font-style: normal; font-weight: 300; font-size: 72px; line-height: 1; font-family: Montserrat Light Alt1; font-variant-ligatures: none; text-align: center; text-anchor: middle; fill: rgb(87, 68, 50);" d="m 491.56325,85.728 c -2.52,-2.376 -6.12,-3.6 -10.728,-3.6 -2.88,0 -5.688,0.504 -8.28,1.44 -2.664,0.936 -4.896,2.232 -6.768,3.888 l 1.8,2.592 c 1.584,-1.44 3.456,-2.592 5.76,-3.456 2.304,-0.864 4.68,-1.296 7.2,-1.296 3.6,0 6.408,0.936 8.28,2.736 1.872,1.872 2.88,4.536 2.88,7.992 v 3.024 h -12.888 c -4.896,0 -8.496,1.008 -10.728,2.952 -2.232,1.944 -3.312,4.464 -3.312,7.56 0,3.24 1.152,5.832 3.6,7.776 2.448,2.016 5.76,2.952 9.936,2.952 3.168,0 5.976,-0.576 8.28,-1.8 2.304,-1.224 4.032,-2.952 5.256,-5.184 V 120 h 3.456 V 96.168 c 0,-4.608 -1.296,-8.064 -3.744,-10.44 z m -4.824,29.448 c -2.16,1.44 -4.824,2.16 -7.92,2.16 -3.312,0 -5.904,-0.648 -7.704,-2.088 -1.872,-1.44 -2.736,-3.384 -2.736,-5.832 0,-2.304 0.792,-4.176 2.448,-5.544 1.656,-1.296 4.32,-2.016 8.064,-2.016 h 12.816 v 7.056 c -1.152,2.736 -2.808,4.824 -4.968,6.264 z" transform="translate(0 244.8559999999969) translate(417.13031666666467 120.30400000000276) scale(1.6666666666667) translate(-464.77925 -82.128)"></path>
                        <path id="path66240" style="font-style: normal; font-weight: 300; font-size: 72px; line-height: 1; font-family: Montserrat Light Alt1; font-variant-ligatures: none; text-align: center; text-anchor: middle; fill: rgb(162, 99, 42);" d="m 539.73013,86.232 c -2.736,-2.736 -6.48,-4.104 -11.16001,-4.104 -3.528,0 -6.55199,0.792 -9.144,2.232 -2.592,1.512 -4.46399,3.6 -5.76,6.192 v -8.136 h -3.456 V 120 h 3.6 V 99.984 c 0,-4.464 1.22401,-7.992 3.816,-10.656 2.52,-2.592 5.976,-3.96 10.44001,-3.96 3.81599,0 6.76799,1.152 8.928,3.312 2.16,2.232 3.23999,5.472 3.23999,9.648 V 120 h 3.6 V 98.04 c 0,-5.112 -1.36799,-9.072 -4.10399,-11.808 z" transform="translate(0 244.8559999999969) translate(517.8484333333333 120.30400000000276) scale(1.6666666666667) translate(-510.21012 -82.128)"></path>
                        <path id="path66242" style="font-style: normal; font-weight: 300; font-size: 72px; line-height: 1; font-family: Montserrat Light Alt1; font-variant-ligatures: none; text-align: center; text-anchor: middle; fill: rgb(162, 99, 42);" d="m 592.27437,66.576 h -3.59999 v 24.552 c -1.58401,-2.808 -3.672,-5.04 -6.336,-6.624 -2.664,-1.584 -5.68801,-2.376 -9,-2.376 -3.528,0 -6.696,0.864 -9.504,2.448 -2.88,1.584 -5.112,3.888 -6.69601,6.768 -1.58399,2.88 -2.37599,6.192 -2.37599,9.864 0,3.744 0.792,6.984 2.37599,9.864 1.58401,2.88 3.81601,5.184 6.69601,6.768 2.808,1.656 5.976,2.448 9.504,2.448 3.384,0 6.40799,-0.792 9.144,-2.376 2.664,-1.584 4.75199,-3.816 6.26399,-6.768 V 120 h 3.528 z m -11.016,48.456 c -2.30399,1.368 -4.82399,2.016 -7.70399,2.016 -2.88,0 -5.47201,-0.648 -7.77601,-2.016 -2.304,-1.296 -4.10399,-3.168 -5.4,-5.616 -1.296,-2.376 -1.94399,-5.112 -1.94399,-8.208 0,-3.024 0.64799,-5.76 1.94399,-8.208 1.29601,-2.376 3.096,-4.248 5.4,-5.616 2.304,-1.296 4.89601,-2.016 7.77601,-2.016 2.88,0 5.4,0.72 7.70399,2.016 2.304,1.368 4.10401,3.24 5.4,5.616 1.29601,2.448 2.01601,5.184 2.01601,8.208 0,3.096 -0.72,5.832 -2.01601,8.208 -1.29599,2.448 -3.096,4.32 -5.4,5.616 z" transform="translate(0 244.8559999999969) translate(617.102200000002 94.3840000000022) scale(1.6666666666667) translate(-554.76238 -66.576)"></path>
                        <path id="path66244" style="font-style: normal; font-weight: 300; font-size: 72px; line-height: 1; font-family: Montserrat Light Alt1; font-variant-ligatures: none; text-align: center; text-anchor: middle; fill: rgb(248, 134, 34);" d="m 608.67462,69.6 v 3.312 h 32.256 V 69.6 Z m 0,50.4 h 3.67201 V 97.752 h 28.58399 V 94.44 h -32.256 z" transform="translate(0 244.8559999999969) translate(731.9559333333377 99.42400000000234) scale(1.6666666666667) translate(-608.67462 -69.6)"></path>
                    </g>
                    <g id="tagline" style="font-style:normal;font-weight:400;font-size:32px;line-height:1;font-family:Montserrat;font-variant-ligatures:none;text-align:center;text-anchor:middle"></g>
                </g>
            </symbol>
        </svg>
    </div>

    <div id="root">
        <!-- <div class="loading-container">
            <div class="loading-box">
                <div class="loader">
                    <div class="face">
                        <div class="circle"></div>
                    </div>
                    <div class="face">
                        <div class="circle"></div>
                    </div>
                </div>
                <span class="font-logo">Slucky UI</span>
            </div>
        </div> -->
        <div class="logo-container">
            <svg class="brandf-logo flash">
                <use xlink:href="#icon-test"></use>
            </svg>
        </div>
    </div>

    <style>
        .progress-loading-g {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
            z-index: 10;
        }

        .progress-loading-g::-moz-progress-bar {
            background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        }

        .progress-loading-g::-webkit-progress-bar {
            background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        }

        .progress-loading-g::-webkit-progress-value {
            background: #fff;
            transition: all 1s;
        }
    </style>
    <progress max="100" value="" class="progress-loading-g" id="progress_loading"></progress>
    <script>
        (function() {
            var $ = function(id) {
                return document.getElementById(id)
            }
            var progress = $('progress_loading');
            var _timer;
            var _disTimer;

            updateProgress(80, 300);
            /**
             * 加载进度模拟
             * @param  {[int]}   tar      [目标值]
             * @param  {[int]}   delay    [时间间隔]
             * @param  {Function} callback [回调]
             * @return {[type]}            [void]
             */
            function updateProgress(tar, delay, callback) {
                clearInterval(_timer);

                if (tar >= 100) {
                    progress.value = 100;
                    clearInterval(_timer);
                    callback && callback();
                    return;
                }

                // 预设终点偏移量
                var isPositive = Math.floor(Math.random() * 2);
                var tarOffset = Math.ceil(Math.random() * 10);
                isPositive ? tar += tarOffset : tar -= tarOffset;

                _timer = setInterval(function() {
                    console.log('progress', progress.value);
                    if (progress.value < tar) {
                        // 累加偏移量
                        var _interval = Math.ceil(Math.random() * 5);
                        progress.value += _interval;
                    } else {
                        // 到达目标值，停止累加
                        progress.value = tar;
                        clearInterval(_timer);
                        callback && callback();
                    }
                }, delay);
            }

            window.onload = function() {
                updateProgress(100, 0, function() {
                    clearTimeout(_disTimer);
                    _disTimer = setTimeout(function() {
                        progress.style.display = "none";
                    }, 3000);
                });
            }
        })();
    </script>
</body>

</html>
